@import (reference) 'mixins';

.f_h1 {
  .font-fluid(18px, 24px, 22px, 28px);

  font-weight: 700;
}

.f_h2 {
  .font-fluid(16px, 20px, 18px, 24px);

  font-weight: 500;
}

.f_h3 {
  .font-fluid(14px, 18px, 16px, 20px);

  font-weight: 500;
}

.f_h4 {
  .font-size(14px, 18px);

  font-weight: 500;
}

.f_p {
  .font-size(14px, 18px);

  font-weight: 400;
}

.f_caption {
  .font-size(12px, 16px);

  font-weight: 400;
}

.f_badge {
  .font-size(12px, 16px);

  font-weight: 300;
}

.f_badge-strong {
  .font-size(12px, 16px);

  font-weight: 400;
}

.f_price {
  .font-size(14px, 18px);

  font-weight: 500;
}

.f_old-price {
  .font-size(12px, 16px);

  font-weight: 300;
}

@roboto-font-path: '~fonts/roboto/';
@roboto-font-name: 'Roboto';

.font-face(@roboto-font-name, 'roboto-light', @roboto-font-path, 300, normal);
.font-face(@roboto-font-name, 'roboto-light-italic', @roboto-font-path, 300, italic);
.font-face(@roboto-font-name, 'roboto-regular', @roboto-font-path, 400, normal);
.font-face(@roboto-font-name, 'roboto-regular-italic', @roboto-font-path, 400, italic);
.font-face(@roboto-font-name, 'roboto-medium', @roboto-font-path, 500, normal);
.font-face(@roboto-font-name, 'roboto-medium-italic', @roboto-font-path, 500, italic);
.font-face(@roboto-font-name, 'roboto-bold', @roboto-font-path, 700, normal);
.font-face(@roboto-font-name, 'roboto-bold-italic', @roboto-font-path, 700, italic);

.font-weight(light, 300);
.font-weight(regular, 400);
.font-weight(medium, 500);
.font-weight(bold, 700);
